<template>
	<view class="application-page">
		<!-- 头部 -->
		<u-navbar 
			title="求职报名"
			:border="false"
			bgColor="#FFFFFF"
			titleColor="#333333"
			:titleStyle="{ fontSize: '36rpx', fontWeight: '500' }"
			leftIcon="arrow-left"
			@leftClick="goBack"
			placeholder
		></u-navbar>

		<!-- 进度指示器 -->
		<view class="progress-section">
			<view class="progress-steps">
				<view class="step-item" :class="{ active: currentStep === 1, completed: currentStep > 1 }">
					<view class="step-number">
						<text v-if="currentStep <= 1">1</text>
						<text v-else class="checkmark">✓</text>
					</view>
					<text class="step-text">{{ hasExistingSignup ? '确认更换企业信息' : '确认身份信息' }}</text>
				</view>
				<view class="step-line">
					<view class="step-line-filled" :style="{ width: currentStep > 1 ? '100%' : '60%' }"></view>
				</view>
				<view class="step-item" :class="{ active: currentStep === 2 }">
					<view class="step-number">2</view>
					<text class="step-text">选择到厂方式</text>
				</view>
			</view>
		</view>

		<!-- 第一步：确认身份信息 -->
		<view v-if="currentStep === 1" class="step-content">
			<!-- 岗位详情卡片 -->
			<view class="card-section">
				<view class="card-header">
					<text class="card-title">岗位详情</text>
					<view class="view-details" @click="viewJobDetails">
						<text class="view-details-text">查看详情</text>
						<u-icon name="arrow-right" size="12" color="var(--u-primary)"></u-icon>
					</view>
				</view>
				<view class="card-content">
					<view class="info-item">
						<text class="info-label">报名企业</text>
						<text class="info-value">{{ jobInfo.company }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">岗位</text>
						<text class="info-value">{{ jobInfo.position }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">用工模式</text>
						<text class="info-value">{{ jobInfo.employmentModel }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">工价</text>
						<text class="info-value">{{ jobInfo.wage }}</text>
					</view>
				</view>
			</view>

			<!-- 原岗位信息对比卡片 -->
			<view v-if="hasExistingSignup" class="card-section">
				<view class="card-header">
					<text class="card-title">岗位变更确认</text>
				</view>
				<view class="card-content">
					<!-- 原岗位信息 -->
					<view class="change-section">
						<view class="change-title">
							<view class="change-badge original">原</view>
							<text class="change-title-text">原报名企业岗位信息</text>
						</view>
						<view class="change-info">
							<view class="info-item">
								<text class="info-label">报名企业</text>
								<text class="info-value">{{ previousSignup.company || '—' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">岗位</text>
								<text class="info-value">{{ previousSignup.position || '—' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">工价</text>
								<text class="info-value">{{ previousSignup.salary || '—' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">地址</text>
								<text class="info-value">{{ previousSignup.address || '—' }}</text>
							</view>
						</view>
					</view>

					<!-- 新岗位信息 -->
					<view class="change-section">
						<view class="change-title">
							<view class="change-badge change">变</view>
							<text class="change-title-text">变更后企业岗位信息</text>
						</view>
						<view class="change-info">
							<view class="info-item">
								<text class="info-label">报名企业</text>
								<text class="info-value">{{ jobInfo.company }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">岗位</text>
								<text class="info-value">{{ jobInfo.position }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">用工模式</text>
								<text class="info-value">{{ jobInfo.employmentModel }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">工价</text>
								<text class="info-value">{{ jobInfo.wage }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">地址</text>
								<text class="info-value">{{ jobInfo.address || '—' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 上传身份证信息卡片 -->
			<IdentityUpload 
				:front="idFrontImage"
				:back="idBackImage"
				@update:front="updateIdCardFront"
				@update:back="updateIdCardBack"
			/>

			<!-- 验证手机号卡片 -->
			<view class="card-section">
				<view class="card-header">
					<text class="card-title">
						<text class="required">*</text>
						验证手机号
					</text>
				</view>
				<view class="card-content">
					<view class="phone-input">
						<text class="phone-label">手机号码</text>
						<text class="phone-number">{{ phoneNumber }}</text>
					</view>
					<view class="verify-code-input">
						<text class="code-label">验证码</text>
						<u-input 
							v-model="verifyCode"
							placeholder="请输入验证码"
							:border="false"
							:custom-style="inputStyle"
							maxlength="6"
						>
							<template #suffix>
								<u-button 
									type="info" 
									size="mini" 
									:custom-style="codeBtnStyle"
									:disabled="isCountingDown"
									@click="getVerifyCode"
								>
									{{ isCountingDown ? `${countdown}s` : '获取验证码' }}
								</u-button>
							</template>
						</u-input>
					</view>
				</view>
			</view>
		</view>

		<!-- 第二步：选择到厂方式 -->
		<view v-if="currentStep === 2" class="step-content">
			<!-- 智能推荐到厂方式卡片 -->
			<view v-if="showRecommendedView" class="card-section">
				<view class="card-header">
					<text class="card-title">已为您智能推荐最佳到厂方式:</text>
				</view>
				<view class="card-content">
					<view class="recommended-method">
						<view class="method-left">
							<view class="method-icon">
								<u-icon name="bus" size="40" color="#FFD700"></u-icon>
							</view>
							<view class="method-info">
								<text class="method-title">华辉专车送厂</text>
								<view class="method-tags">
									<text class="tag">省钱</text>
									<text class="tag">省事</text>
								</view>
								<text class="method-desc">到华辉门店集合,由门店安排专车免费送达工厂面试</text>
							</view>
						</view>
						<view class="method-right">
							<text class="change-method" @click="toggleMethodView">更换到厂方式</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 选择集合门店卡片 -->
			<view v-if="showRecommendedView" class="card-section">
				<view class="card-header">
					<text class="card-title">选择集合门店:</text>
				</view>
				<view class="card-content">
					<!-- 排序切换 -->
					<view class="sort-tabs">
						<view 
							class="sort-tab" 
							:class="{ active: sortType === 'distance' }"
							@click="changeSort('distance')"
						>
							<text class="sort-text">离我最近</text>
						</view>
						<view 
							class="sort-tab" 
							:class="{ active: sortType === 'factory' }"
							@click="changeSort('factory')"
						>
							<text class="sort-text">离厂最近</text>
						</view>
					</view>

					<!-- 门店列表 -->
					<view class="store-list">
						<view 
							class="store-item" 
							:class="{ active: selectedStore === store.id }"
							v-for="store in sortedStores" 
							:key="store.id"
							@click="selectStore(store.id)"
						>
							<view class="store-info">
								<text class="store-name">{{ store.name }}</text>
								<text class="store-distance">{{ store.distance }}</text>
							</view>
							<view class="store-address">
								<u-icon name="map-pin" size="16" color="#666"></u-icon>
								<text class="address-text">{{ store.address }}</text>
							</view>
							<view class="store-time">
								<text class="time-text">门店发车时间:{{ store.departureTime }}</text>
							</view>
							<view v-if="store.badge" class="store-badge">
								<text class="badge-text">{{ store.badge }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 到厂方式卡片（自行到厂） -->
			<view v-if="!showRecommendedView" class="card-section">
				<view class="card-header">
					<text class="card-title">到厂方式:</text>
				</view>
				<view class="card-content">
					<view class="method-selection">
						<view class="method-item" :class="{ active: selectedMethod === 'self' }" @click="selectMethod('self')">
							<view class="method-icon">
								<u-icon name="car" size="32" :color="selectedMethod === 'self' ? 'var(--u-primary)' : '#999'"></u-icon>
							</view>
							<view class="method-content">
								<text class="method-title">自行到厂</text>
								<text class="method-desc">自行前往企业指定面试集合点进行面试</text>
							</view>
						</view>
					</view>
					<view class="change-method-link" @click="toggleMethodView">
						<text class="change-text">更换系统推荐到厂方式</text>
						<u-icon name="reload" size="16" color="#1890FF"></u-icon>
					</view>
				</view>
			</view>

			<!-- 您面试的企业卡片 -->
			<view v-if="!showRecommendedView" class="card-section">
				<view class="card-header">
					<view class="header-left">
						<view class="green-dot"></view>
						<text class="card-title">您面试的企业: {{ jobInfo.company }}</text>
					</view>
				</view>
				<view class="card-content">
					<view class="company-info">
						<view class="info-row">
							<text class="info-label">地址</text>
							<text class="info-value">{{ jobInfo.address }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">驻厂客服接待时间</text>
							<text class="info-value">12:30至14:00</text>
						</view>
						<view class="info-row">
							<text class="info-label">预估到厂花费时间</text>
							<text class="info-value">1小时11分+(驾车时间); 4小时0分+(公共交通)</text>
						</view>
					</view>
					
					<view class="location-section">
						<view class="location-header">
							<view class="green-dot"></view>
							<text class="location-title">您当前地理位置:</text>
						</view>
						<view class="location-button" @click="getLocation">
							<u-icon name="map-pin" size="20" color="var(--u-primary)"></u-icon>
							<text class="location-text">点击授权获取最新地理位置</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部固定区域 -->
		<view class="bottom-section">
			<!-- 协议勾选 -->
			<view v-if="currentStep === 1" class="agreement-section">
				<view class="agreement-item">
					<u-checkbox 
						v-model="agreement1" 
						shape="circle"
						:custom-style="checkboxStyle"
					></u-checkbox>
					<text class="agreement-text">同意并授权以上身份信息用于身份验证及求职</text>
				</view>
				<view class="agreement-item">
					<u-checkbox 
						v-model="agreement2" 
						shape="circle"
						:custom-style="checkboxStyle"
					></u-checkbox>
					<text class="agreement-text">我已阅读并认同该岗位信息及招聘要求</text>
				</view>
			</view>
			
			<!-- 按钮区域 -->
			<view class="button-section">
				<view class="button-group">
					<u-button 
						v-if="currentStep === 2"
						type="info" 
						:custom-style="secondaryBtnStyle"
						@click="prevStep"
					>
						上一步
					</u-button>
					<u-button 
						v-if="currentStep === 1"
						type="primary" 
						:custom-style="primaryBtnStyle"
						:disabled="!canProceedToNext"
						@click="nextStep"
					>
						{{ hasExistingSignup ? '确认变更信息并下一步' : '下一步' }}
					</u-button>
					<u-button 
						v-if="currentStep === 2"
						type="primary" 
						:custom-style="primaryBtnStyle"
						:disabled="!canSubmit"
						@click="submitApplication"
					>
						确认报名
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { verifyApi, applicationApi, jobApi } from '@/api/api-helper.js'
import IdentityUpload from '@/components/IdentityUpload.vue'
import { userStore } from '@/stores/userStore'

// 当前步骤
const currentStep = ref(1)

// 岗位信息
const jobInfo = ref({
	company: '东莞高步电子厂',
	position: '不体检 普通工衣',
	employmentModel: '派遣工',
	wage: '22元/时',
	id: '',
	hireRecruitUseId: '',
	hireRecruitUseEntryId: '',
	address: ''
})

// 身份证图片
const idFrontImage = ref('')
const idBackImage = ref('')

// 手机号验证
const phoneNumber = ref('15118157347')
const verifyCode = ref('')
const countdown = ref(0)
const isCountingDown = ref(false)

// 协议勾选
const agreement1 = ref(true)
const agreement2 = ref(true)

// 报名状态相关
const hasExistingSignup = ref(false)
const previousSignup = ref<any>({})

// 第二步选择状态
const selectedMethod = ref('self') // 默认选择自行到厂
const selectedTime = ref('')
const remark = ref('')

// 视图切换状态
const showRecommendedView = ref(false) // false: 显示自行到厂, true: 显示推荐方式

// 门店列表
const stores = ref([
	{
		id: 'store1',
		name: '华辉人力-华南运营中心',
		address: '广东省深圳市龙华区福城街道可图佳大厦',
		distance: '4.4km',
		departureTime: '暂无',
		badge: null
	},
	{
		id: 'store2',
		name: '华辉人力-华东运营中心',
		address: '江苏省苏州市昆山市玉山镇柏庐南路博悦广场',
		distance: '1179.3km',
		departureTime: '暂无',
		badge: '五星门店'
	}
])

const selectedStore = ref('store1') // 默认选中第一个门店
const sortType = ref('distance') // 'distance' or 'factory'

// 样式配置
const navbarStyle = {
	backgroundColor: '#FFFFFF',
	color: '#333333'
}

const inputStyle = {
	backgroundColor: '#F8F8F8',
	borderRadius: '8rpx',
	padding: '0 24rpx',
	height: '80rpx'
}

const codeBtnStyle = {
	backgroundColor: 'var(--u-primary)',
	color: '#FFFFFF',
	borderRadius: '8rpx',
	height: '60rpx',
	lineHeight: '60rpx',
	fontSize: '24rpx'
}

const checkboxStyle = {
	color: 'var(--u-primary)'
}

const primaryBtnStyle = {
	backgroundColor: 'var(--u-primary)',
	borderColor: 'var(--u-primary)',
	borderRadius: '12rpx',
	height: '88rpx',
	fontSize: '32rpx',
	fontWeight: '600'
}

const secondaryBtnStyle = {
	backgroundColor: '#FFFFFF',
	borderColor: 'var(--u-primary)',
	color: 'var(--u-primary)',
	borderRadius: '12rpx',
	height: '88rpx',
	fontSize: '32rpx',
	fontWeight: '600'
}

const textareaStyle = {
	backgroundColor: '#F8F8F8',
	borderRadius: '12rpx',
	padding: '24rpx',
	minHeight: '160rpx'
}

// 计算是否可以进入下一步
const canProceedToNext = computed(() => {
	return idFrontImage.value && 
		   idBackImage.value && 
		   verifyCode.value.length === 6 && 
		   agreement1.value && 
		   agreement2.value
})

// 计算是否可以提交
const canSubmit = computed(() => {
	if (showRecommendedView.value) {
		return selectedStore.value
	} else {
		return selectedMethod.value
	}
})

// 返回上一页
const goBack = () => {
	uni.navigateBack()
}

// 查看岗位详情
const viewJobDetails = () => {
	uni.navigateTo({
		url: '/pages/jobs/job-detail'
	})
}

// 獲取驗證碼
const getVerifyCode = async () => {
	if (isCountingDown.value) return
	
	try {
		// 調用API發送驗證碼
		await verifyApi.sendVerifyCode(phoneNumber.value)
		
		uni.showToast({
			title: '驗證碼已發送',
			icon: 'success'
		})
		
		// 開始倒計時
		countdown.value = 60
		isCountingDown.value = true
		const timer = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearInterval(timer)
				isCountingDown.value = false
			}
		}, 1000)
	} catch (error) {
		console.error('發送驗證碼失敗:', error)
		uni.showToast({
			title: '驗證碼發送失敗',
			icon: 'none'
		})
	}
}



// 更新身份证正面
const updateIdCardFront = async (filePath: string) => {
	try {
		idFrontImage.value = filePath
		
		// 上傳到服務器
		const uploadResult = await verifyApi.ocrIdCard('front', filePath)
		console.log('身份證正面上傳成功:', uploadResult)
		
	} catch (error) {
		console.error('上傳身份證正面失敗:', error)
		uni.showToast({
			title: '上傳失敗',
			icon: 'none'
		})
	}
}

// 更新身份证背面
const updateIdCardBack = async (filePath: string) => {
	try {
		idBackImage.value = filePath
		
		// 上傳到服務器
		const uploadResult = await verifyApi.ocrIdCard('back', filePath)
		console.log('身份證背面上傳成功:', uploadResult)
		
	} catch (error) {
		console.error('上傳身份證背面失敗:', error)
		uni.showToast({
			title: '上傳失敗',
			icon: 'none'
		})
	}
}

// 下一步
const nextStep = () => {
	if (!canProceedToNext.value) {
		uni.showToast({
			title: '请完善所有必填信息',
			icon: 'none'
		})
		return
	}
	
	currentStep.value = 2
}

// 上一步
const prevStep = () => {
	currentStep.value = 1
}

// 选择到厂方式
const selectMethod = (method: string) => {
	selectedMethod.value = method
}

// 切换视图（更换到厂方式）
const toggleMethodView = () => {
	showRecommendedView.value = !showRecommendedView.value
	if (showRecommendedView.value) {
		// 切换到推荐视图
		selectedMethod.value = 'recommended'
	} else {
		// 切换回自行到厂
		selectedMethod.value = 'self'
	}
}

// 获取地理位置
const getLocation = () => {
	uni.getLocation({
		type: 'gcj02',
		success: (res) => {
			uni.showToast({
				title: '位置获取成功',
				icon: 'success'
			})
		},
		fail: () => {
			uni.showToast({
				title: '位置获取失败',
				icon: 'none'
			})
		}
	})
}

// 切换排序方式
const changeSort = (type: string) => {
	sortType.value = type
}

// 排序门店
const sortedStores = computed(() => {
	if (sortType.value === 'distance') {
		return stores.value.sort((a, b) => parseFloat(a.distance.replace('km', '')) - parseFloat(b.distance.replace('km', '')))
	} else {
		return stores.value.sort((a, b) => parseFloat(a.distance.replace('km', '')) - parseFloat(b.distance.replace('km', '')))
	}
})

// 选择门店
const selectStore = (id: string) => {
	selectedStore.value = id
}

// 提交报名
const submitApplication = async () => {
	if (!canSubmit.value) {
		uni.showToast({
			title: '请完善所有必填信息',
			icon: 'none'
		})
		return
	}
	
	try {
		uni.showLoading({
			title: '提交中...'
		})
		
		        // 準備提交數據
        const applicationData = {
        	id: '', // 新建时为空
        	F_OrgUnitID: { id: '1' }, // 招聘组织
        	F_CustomerID: jobInfo.value.company || '东莞高步电子厂', // 用人单位
        	F_HireID: jobInfo.value.id || '1', // 招聘计划ID
        	F_Description: `报名${jobInfo.value.position}岗位`, // 描述
        	F_Name: '张三', // 报名人姓名，实际应该从用户信息获取
        	F_BizDate: new Date().toISOString(), // 报名时间
        	F_IdCard: '440101199001011234', // 身份证号，实际应该从用户信息获取
        	F_Mobile: phoneNumber.value, // 联系电话
        	F_WeiXin: 'wx123456', // 微信，实际应该从用户信息获取
        	F_IdCardFront: { url: idFrontImage.value }, // 身份证正面
        	F_IdCardBack: { url: idBackImage.value }, // 身份证背面
        	F_BillStatus: { id: '1' }, // 状态
        	F_HireSourceID: { id: '1' }, // 招聘来源
        	F_HirePersonID: { id: '1' }, // 招聘人
        	F_BrokerID: { id: '1' }, // 经济人
        	F_AuditorID: '', // 审核人
        	F_CreatorUserId: uni.getStorageSync('userId') || '1', // 创建用户
        	F_LastModifyUserId: uni.getStorageSync('userId') || '1', // 修改用户
        	F_AuditDate: '', // 审核时间
        	F_CreatorTime: new Date().toISOString(), // 创建时间
        	F_LastModifyTime: new Date().toISOString(), // 修改时间
        	F_DeleteUserId: '', // 删除用户
        	F_DeleteTime: '' // 删除时间
        }
        
        // 調用API提交申請
        const result = await applicationApi.createLaborSignup(applicationData)
		
		uni.hideLoading()
		
		        if (result.code === 200) {
			uni.showToast({
				title: '报名成功',
				icon: 'success'
			})
			
			// 延遲跳轉到我的求職頁面
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/applications/applications'
				})
			}, 1500)
		        } else {
        	uni.showToast({
        		title: result.msg || '报名失败',
        		icon: 'none'
        	})
        }
		
	} catch (error) {
		uni.hideLoading()
		console.error('提交申请失败:', error)
		uni.showToast({
			title: '提交失败，请重试',
			icon: 'none'
		})
	}
}

// 页面加载时检查报名状态
onMounted(async () => {
	// 获取页面参数
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const options = currentPage.options || {}
	
	// 更新岗位信息
	if (options.jobId) jobInfo.value.id = options.jobId
	if (options.hireRecruitUseId) jobInfo.value.hireRecruitUseId = decodeURIComponent(options.hireRecruitUseId)
	if (options.hireRecruitUseEntryId) jobInfo.value.hireRecruitUseEntryId = decodeURIComponent(options.hireRecruitUseEntryId)
	if (options.customerName) jobInfo.value.company = decodeURIComponent(options.customerName)
	if (options.jobTitle) jobInfo.value.position = decodeURIComponent(options.jobTitle)
	if (options.useWorkType) jobInfo.value.employmentModel = decodeURIComponent(options.useWorkType)
	if (options.jobSalary) jobInfo.value.wage = decodeURIComponent(options.jobSalary)
	if (options.address) jobInfo.value.address = decodeURIComponent(options.address)

	// 调用接口判断是否能报名并返回岗位信息
	try {
		const openId = userStore.getOpenId()
		if (openId && jobInfo.value.hireRecruitUseId && jobInfo.value.hireRecruitUseEntryId) {
			const today = new Date().toISOString().split('T')[0] // 格式：2025-01-20
			
			const result = await applicationApi.getChangeLaborSignMessage({
				openId: openId,
				date: today,
				recruitUseId: jobInfo.value.hireRecruitUseId,
				recruitUseEntryId: jobInfo.value.hireRecruitUseEntryId
			})
			
			if (result && result.code === 200 && result.data) {
				// 根据接口返回的hasExistingSignup字段判断是否已有报名
				hasExistingSignup.value = result.data.hasExistingSignup || false
				
				// 如果已有报名，获取原岗位信息
				if (hasExistingSignup.value && result.data.previousSignup) {
					previousSignup.value = {
						company: result.data.previousSignup.company || result.data.previousSignup.customerName || '',
						position: result.data.previousSignup.position || result.data.previousSignup.jobTitle || '',
						salary: result.data.previousSignup.salary || result.data.previousSignup.workPrice || '',
						address: result.data.previousSignup.address || '',
						hireRecruitUseId: result.data.previousSignup.hireRecruitUseId || '',
						hireRecruitUseEntryId: result.data.previousSignup.hireRecruitUseEntryId || '',
						createdAt: result.data.previousSignup.createdAt || Date.now()
					}
				}
			}
		}
	} catch (error) {
		console.error('获取报名状态失败:', error)
		// 如果接口调用失败，回退到本地缓存检查
		try {
			const last = uni.getStorageSync('last_signup')
			if (last && last.hireRecruitUseEntryId) {
				hasExistingSignup.value = true
				previousSignup.value = last
			}
		} catch (e) {
			hasExistingSignup.value = false
		}
	}
})
</script>

<style lang="scss" scoped>
.application-page {
	min-height: 100vh;
	background-color: #F5F5F5;
	padding-bottom: 120rpx;
}

.progress-section {
	background-color: #FFFFFF;
	padding: 32rpx;
}

.progress-steps {
	display: flex;
	align-items: center;
	justify-content: center;
}

.step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.step-number {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 600;
	margin-bottom: 16rpx;
	color: #FFFFFF;
}

.step-item.active .step-number {
	background-color: var(--u-primary);
}

.step-item.completed .step-number {
	background-color: #52C41A;
}

.step-item:not(.active):not(.completed) .step-number {
	background-color: #E5E5E5;
	color: #999999;
}

.checkmark {
	font-size: 20rpx;
	font-weight: bold;
}

.step-text {
	font-size: 24rpx;
	color: #333;
}

.step-item:not(.active):not(.completed) .step-text {
	color: #999999;
}

.step-line {
	width: 120rpx;
	height: 4rpx;
	background-color: #E5E5E5;
	margin: 0 32rpx;
	position: relative;
}

.step-line-filled {
	height: 100%;
	background-color: var(--u-primary);
	border-radius: 2rpx;
	transition: width 0.3s ease;
}

.step-content {
	padding: 16rpx;
}

.card-section {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 16rpx;
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	border-bottom: 1rpx solid #F0F0F0;
}

.card-title {
	font-size: 28rpx;
	font-weight: 600;
	color: var(--u-primary);
	display: flex;
	align-items: center;
}

.card-subtitle {
	font-size: 24rpx;
	color: #999999;
}

.required {
	color: #FF4757;
	margin-right: 4rpx;
}

.view-details {
	display: flex;
	align-items: center;
}

.view-details-text {
	font-size: 24rpx;
	color: var(--u-primary);
	margin-right: 8rpx;
}

.card-content {
	padding: 32rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.info-item:last-child {
	margin-bottom: 0;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}



.phone-input {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}

.phone-label {
	font-size: 26rpx;
	color: #666666;
	margin-right: 32rpx;
}

.phone-number {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}

.verify-code-input {
	display: flex;
	align-items: center;
}

.code-label {
	font-size: 26rpx;
	color: #666666;
	margin-right: 32rpx;
	white-space: nowrap;
}

.arrival-method-section {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 32rpx;
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: 600;
	color: var(--u-primary);
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}

.method-options {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.method-item {
	display: flex;
	align-items: center;
	padding: 24rpx;
	border: 2rpx solid #F0F0F0;
	border-radius: 12rpx;
	background-color: #FFFFFF;
	transition: all 0.3s ease;
}

.method-item.active {
	border-color: var(--u-primary);
	background-color: var(--u-primary-light);
}

.method-icon {
	margin-right: 24rpx;
}

.method-content {
	flex: 1;
}

.method-title {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 8rpx;
	display: block;
}

.method-desc {
	font-size: 24rpx;
	color: #666666;
	display: block;
	line-height: 1.4;
}

.method-check {
	margin-left: 16rpx;
}

.arrival-time-section {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 32rpx;
	margin-bottom: 16rpx;
}

.time-options {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.time-item {
	padding: 24rpx;
	border: 2rpx solid #F0F0F0;
	border-radius: 12rpx;
	background-color: #FFFFFF;
	text-align: center;
	transition: all 0.3s ease;
}

.time-item.active {
	border-color: var(--u-primary);
	background-color: var(--u-primary-light);
}

.time-text {
	font-size: 26rpx;
	color: #333333;
}

.time-item.active .time-text {
	color: var(--u-primary);
	font-weight: 500;
}

.remark-section {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	padding: 32rpx;
}

.bottom-section {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	padding: 24rpx 32rpx;
	border-top: 1rpx solid #F0F0F0;
}

.agreement-section {
	margin-bottom: 24rpx;
}

.agreement-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 24rpx;
}

.agreement-item:last-child {
	margin-bottom: 0;
}

.agreement-text {
	font-size: 24rpx;
	color: #666666;
	line-height: 1.5;
	margin-left: 16rpx;
	flex: 1;
}

.button-section {
	width: 100%;
}

.button-group {
	display: flex;
	gap: 24rpx;
}

.button-group .u-button {
	flex: 1;
}

.method-selection {
	margin-bottom: 24rpx;
}

.method-item {
	display: flex;
	align-items: center;
	padding: 24rpx;
	border: 2rpx solid #F0F0F0;
	border-radius: 12rpx;
	background-color: #FFFFFF;
	transition: all 0.3s ease;
}

.method-item.active {
	border-color: var(--u-primary);
	background-color: var(--u-primary-light);
}

.method-icon {
	margin-right: 24rpx;
}

.method-content {
	flex: 1;
}

.method-title {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	margin-bottom: 8rpx;
	display: block;
}

.method-desc {
	font-size: 24rpx;
	color: #666666;
	display: block;
	line-height: 1.4;
}

.change-method-link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16rpx;
	border-top: 1rpx solid #F0F0F0;
	margin-top: 16rpx;
}

.change-text {
	font-size: 24rpx;
	color: #1890FF;
	margin-right: 8rpx;
}

.header-left {
	display: flex;
	align-items: center;
}

.green-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
	background-color: #52C41A;
	margin-right: 12rpx;
}

.company-info {
	margin-bottom: 32rpx;
}

.info-row {
	display: flex;
	margin-bottom: 16rpx;
}

.info-row:last-child {
	margin-bottom: 0;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
	width: 200rpx;
	flex-shrink: 0;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	flex: 1;
	line-height: 1.4;
}

.location-section {
	border-top: 1rpx solid #F0F0F0;
	padding-top: 24rpx;
}

.location-header {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.location-title {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
}

.location-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	background-color: #F8F8F8;
	border-radius: 12rpx;
	border: 2rpx solid #E0E0E0;
}

.location-text {
	font-size: 24rpx;
	color: #666666;
	margin-left: 12rpx;
}

.recommended-method {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 24rpx;
	background-color: #FFF5F2;
	border-radius: 12rpx;
	border: 2rpx solid #FF6B35;
}

.method-left {
	display: flex;
	align-items: flex-start;
	flex: 1;
}

.method-info {
	flex: 1;
}

.method-tags {
	display: flex;
	gap: 12rpx;
	margin-bottom: 12rpx;
}

.tag {
	font-size: 20rpx;
	color: #FFFFFF;
	background-color: #52C41A;
	padding: 4rpx 12rpx;
	border-radius: 8rpx;
	font-weight: 500;
}

.method-right {
	text-align: right;
	margin-left: 24rpx;
}

.change-method {
	font-size: 24rpx;
	color: #1890FF;
	text-decoration: underline;
}

.sort-tabs {
	display: flex;
	gap: 16rpx;
	margin-bottom: 24rpx;
}

.sort-tab {
	flex: 1;
	padding: 16rpx 24rpx;
	border: 2rpx solid #F0F0F0;
	border-radius: 12rpx;
	background-color: #FFFFFF;
	text-align: center;
	transition: all 0.3s ease;
}

.sort-tab.active {
	border-color: #FF6B35;
	background-color: #FF6B35;
}

.sort-text {
	font-size: 24rpx;
	color: #666666;
}

.sort-tab.active .sort-text {
	color: #FFFFFF;
	font-weight: 500;
}

.store-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.store-item {
	background-color: #FFFFFF;
	border: 2rpx solid #F0F0F0;
	border-radius: 12rpx;
	padding: 24rpx;
	position: relative;
	transition: all 0.3s ease;
}

.store-item.active {
	border-color: #FF6B35;
	background-color: #FFF5F2;
}

.store-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.store-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	flex: 1;
	margin-right: 16rpx;
}

.store-distance {
	font-size: 24rpx;
	color: #FF6B35;
	font-weight: 500;
}

.store-item:not(.active) .store-distance {
	color: #999999;
}

.store-address {
	display: flex;
	align-items: center;
	margin-bottom: 8rpx;
}

.address-text {
	font-size: 24rpx;
	color: #666666;
	margin-left: 8rpx;
}

.store-time {
	margin-top: 4rpx;
}

.time-text {
	font-size: 24rpx;
	color: #999999;
}

.store-badge {
	position: absolute;
	top: 16rpx;
	right: 16rpx;
	background-color: #FF6B35;
	color: #FFFFFF;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
	font-size: 20rpx;
	font-weight: 600;
	border: 2rpx dashed #FF6B35;
}

.change-section {
	margin-bottom: 24rpx;
}

.change-title {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.change-badge {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: 600;
	color: #FFFFFF;
	margin-right: 12rpx;
}

.change-badge.original {
	background-color: #FF6B35;
}

.change-badge.change {
	background-color: #1890FF;
}

.change-title-text {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
}

.change-info {
	background-color: #F8F9FA;
	border-radius: 8rpx;
	padding: 16rpx;
	border-left: 4rpx solid #E9ECEF;
}

.change-info .info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8rpx 0;
}

.change-info .info-label {
	font-size: 26rpx;
	color: #666666;
	font-weight: 500;
}

.change-info .info-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 600;
	max-width: 60%;
	text-align: right;
}
</style> 